<%@page pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp"%>

<body>
	<div id="app" v-cloak>

		<!--条件查询 -->
		<div class="toolbar2">
			<el-form :inline="true" :model="filters" label-position="top" size="small">
				<div style="margin-left: 16px;position: relative;">
					<el-form-item label="经营区域">
						<el-cascader v-model="regionIds" :options="regionData" :props="regionProps" @change="handleRegionChange"
						 clearable></el-cascader>
					</el-form-item>
					<el-form-item label="经营户" prop="individualId">
						<el-select v-model="filters.individualId" clearable filterable placeholder="请选择">
							<el-option v-for="item in individualData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="查看所有" prop="result">
						<el-switch v-model="filters.onlyOwn"></el-switch>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<div style="position: relative">
			<el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
				<el-table-column prop="individualName" label="经营户" min-width="100"></el-table-column>
				<el-table-column prop="checkName" label="检查项目名称" min-width="100"></el-table-column>
				<el-table-column prop="description" label="检查描述" min-width="100"></el-table-column>
				<el-table-column prop="time" label="检查日期" min-width="100" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="result" label="检查状态" min-width="150">
					<template scope="scope">
						<el-tag type="danger" size="small" v-if="scope.row.result == '-1'">不合格</el-tag>
						<el-tag size="small" v-if="scope.row.result == '-2'">待审核</el-tag>
						<el-tag type="warning" size="small" v-if="scope.row.result == '0'">已整改</el-tag>
						<el-tag type="success" size="small" v-if="scope.row.result == '1'">合格</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="realName" label="跟进人" min-width="100"></el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
			<el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
			 :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next"></el-pagination>
			<el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
			 @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</div>

		<!--查看整改界面-->
		<el-dialog title="跟进详情" :visible.sync="detailsFormVisible" :close-on-click-modal="false" @open="handleOpen" @close="handleClose"
		 width="900px">
			<el-table :data="tableReformData" border stripe v-loading="refromLoading" :height="tableH" ref="table">
				<el-table-column prop="name" label="经营户" min-width="100"></el-table-column>
				<el-table-column prop="content" label="整改描述" min-width="100"></el-table-column>
				<el-table-column prop="time" label="日期" min-width="100" :formatter="dateFormat"></el-table-column>
				<el-table-column label="图片（点击图片预览）" width="250">
					<template scope="scope">
						<el-image style="width: 100px; height: 100px" :src="'${imgesBaseUrl}/'+ scope.row.imageUrl.split(',')[0]"  :preview-src-list="previewList(scope.row)"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" min-width="150">
					<template scope="scope">
						<el-tag type="warning" size="small" v-if="scope.row.type == '2'">监察者回复</el-tag>
						<el-tag type="success" size="small" v-if="scope.row.type == '1'">经营者整改</el-tag>
					</template>
				</el-table-column>
			</el-table>
          <el-button type="primary" size="small" @click="handlePass()" style= "width: 422px;margin-top:5px;">通过</el-button>
           <el-button type="danger" size="small" @click="handleNoPass()"  style= "width: 422px;margin-top:5px;">不通过</el-button>
		</el-dialog>
		
		
<el-dialog title="回复经营" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen" @close="handleClose"
		 width="700px">
			<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" :inline="false">
				<el-form-item label="描述" prop="content">
					<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="请输入内容" v-model="editForm.content"
					 style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="imageUrl">
					<el-upload action="${ctx}/backstage/file/imgUpload?saveType=reform" list-type="picture-card" :file-list="fileList"
					 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="file" slot-scope="{file}">
							<img class="el-upload-list__item-thumbnail" :src="file.url.indexOf('blob:')== 0 ? file.url : '${imgesBaseUrl}/' + file.url" alt="">
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in"></i>
								</span>
								<span class="el-upload-list__item-delete" @click="handleRemove(file)">
									<i class="el-icon-delete"></i>
								</span>
							</span>
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl.indexOf('blob:')== 0 ? dialogImageUrl : '${imgesBaseUrl}/' + dialogImageUrl" alt="">
		</el-dialog>
	</div>
</body>
<script>
	$(window).resize(function() {
		app.tableH = $(window).height() - 155;
	});

	var app = new Vue({
		el: '#app',
		data: {
			isMobile: '${isMobile}',
			tableH: $(window).height() - 155,
			loading: false,
			refromLoading: false,
			page: 1,
			size: 10,
			total: 0,
			filters: {},
			editFormVisible: false,
			detailsFormVisible: false,
			imageFormVisible: false,
			regionIds: [],
			regionData: [],
			regionProps: {
				label: 'name',
				value: 'id',
				children: 'children',
				checkStrictly: true
			},
			individualData: [],
			editLoading: false,
			editFormRules: {
				content: [{
					required: true,
					message: '不能为空！'
				}],
				imageUrl: [{
					required: true,
					message: '不能为空！',
					validator: function(rule, value,callback){
						if(app.fileList.length==0){
							callback(new Error());
						}else{
							callback();
						}
					}
				}]
			},
			editForm: {},
			tableData: [],
			tableReformData: [],
			dialogImageUrl: '',
			dialogVisible: false,
			fileList: []
		},
		created: function() {
			this.loadData();
			this.loadRegionData();
			this.loadIndividualData();
		},
		methods: {
			loadData: function() {
				this.loading = true;
				var data = Object.assign({}, this.filters);
				data.page = this.page;
				data.size = this.size;
				data.gj = "1";
				$.ajax({
					url: "${ctx}/backstage/check/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.total = returndata.data.count;
							app.tableData = returndata.data.list;
						} else {
							app.total = 0;
							app.tableData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.loading = false;
					}
				});
			},
			loadIndividualData: function() {
				$.ajax({
					url: "${ctx}/backstage/individual/query",
					data: {
						roleId: 2,
						page: 1,
						size: 99
					},
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.individualData = returndata.data.list;
						} else {
							app.individualData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			loadRegionData: function() {
				$.ajax({
					url: "${ctx}/backstage/town/queryRegion",
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.regionData = returndata.data;
						} else {
							app.regionData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			handleSearch: function() {
				this.loadData();
			},
			sizeChange: function(val) {
				this.size = val;
				this.loadData();
			},
			handleCurrentChange: function(val) {
				this.page = val;
				this.loadData();
			},
			handleClose: function() {
				this.editLoading = false;
				this.fileList = [];
			},
			handleOpen: function() {
				if (this.$refs.editForm) {
					this.$refs.editForm.resetFields();
				}
			},
			handleNoPass: function() {
				this.editForm = {checkId:app.editForm.id};
				this.editFormVisible = true;
			},
			handleEdit: function(index, row) {
				this.editForm = Object.assign({}, row);
				this.refromLoading = true;
				var data = {
				 checkId:this.editForm.id
				};
				$.ajax({
					url: "${ctx}/backstage/reform/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.tableReformData = returndata.data;
						} else {
							app.tableReformData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.refromLoading = false;
					}
				});
				this.detailsFormVisible = true;
			},
			handleImage: function(index, row) {
 				$.each(row.imageUrl.split(','), function(i, val) {
					if (val.length > 0) {
						app.fileList.push({
							url: val
						});
					}
				}); 
 				console.log(app.fileList);
				this.imageFormVisible = true;
			},
			handleSave: function() {
				this.$refs['editForm'].validate(function(value) {
					if (value) {
						app.editLoading = true;
						app.editForm.imageUrl = '';
						$.each(app.fileList, function(i, item) {
							if(app.editForm.imageUrl.length>0){
								app.editForm.imageUrl += ',';
							}
							if (item.response != undefined) {
								app.editForm.imageUrl += item.response.url;
							} else {
								app.editForm.imageUrl += item.url;
							}
						});
						$.ajax({
							type: 'POST',
							url: "${ctx}/backstage/reform/edit",
							data: app.editForm,
							dataType: 'json',
							success: function(returndata) {
								if (returndata.success) {
									app.loadData();
									app.$message({
										message: '提交成功!',
										type: 'success'
									});
									app.editFormVisible = false;
									app.detailsFormVisible = false;

								} else {
									app.$message({
										message: returndata.errors.message,
										type: 'error'
									});
								}
								app.editLoading = false;
							}
						});
					}
				});
			},
			handlePass: function() {
				console.log(app.editForm)
				this.$confirm('确认整改通过？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					app.editLoading = true;
					$.ajax({
						url: "${ctx}/backstage/check/pass",
						data: {
							id: app.editForm.id
						},
						dataType: 'json',
						success: function(returndata) {
							if (returndata.success) {
								app.loadData();
								app.detailsFormVisible = true;
								app.$message({
									message: '成功!',
									type: 'success'
								});
							} else {
								app.$notify.error({
									title: '错误',
									message: returndata.errors.message
								});
							}
							app.editLoading = false;
							
						}
					});
				});
			},
			dateFormat: function(row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				if (date.length < 10) {
					var date = new Date(date * 1000); //如果date为10位不需要乘1000  
				} else {
					var date = new Date(date);
				}
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m +s;
			},
			handleRegionChange: function(val) {
				switch (val.length) {
					case 0:
						this.filters.districtId = '';
						this.filters.townId = '';
						break;
					case 1:
						this.filters.districtId = val[0];
						this.filters.townId = '';
						break;
					case 2:
						this.filters.districtId = val[0];
						this.filters.townId = val[1];
						break;
				}
			},
			handleRemove(file) {
				$.each(this.fileList, function(i, item) {
					if (JSON.stringify(item) == JSON.stringify(file)) {
						app.fileList.splice(i, 1);
						return;
					}
				});
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			beforeAvatarUpload: function(file) {
				const isJPG = file.type === 'image/jpeg';
				const isGIF = file.type === 'image/gif';
				const isPNG = file.type === 'image/png';
				const isBMP = file.type === 'image/bmp';
				const isLt5M = file.size / 1024 / 1024 < 5;
				//判断图片格式
				if (!isJPG && !isGIF && !isPNG && !isBMP) {
					this.$message({
						showClose: true,
						message: '上传图片必须是JPG/GIF/PNG/BMP 格式!',
						type: 'error'
					});
				}
				//判断图片格式大小
				if (!isLt5M) {
					this.$message({
						showClose: true,
						message: '上传图片大小不能超过 5MB!',
						type: 'error'
					});
				}
				return (isJPG || isBMP || isGIF || isPNG);
			},
			//图片上传成功调用函数，文件上传成功时的钩子
			handleAvatarSuccess: function(res, file, fileList) {
				if (res.success) {
					this.fileList.push(file);
				} else {
					app.$notify.error({
						title: '错误',
						message: res.errors.message
					});
				}

			},
			previewList: function(row){
				var arr = [];
				row.imageUrl.split(',').forEach(function(url) {
				  arr.push('${imgesBaseUrl}/' + url);
				});
				return arr;
			}
		}
	});
</script>
